<template>
<!--主页main侧边选择组件-->
     <el-row class="tac" style="width: 60%;margin: 0 auto;" v-if="isViews">
       <el-col span=4 style="position:fixed;left: 13%/*position: sticky;top: 0px*/">
         <el-menu
             :default-active=group_index
             class="el-menu-vertical-demo">

<!--主页--最新--关注-->
           <el-menu-item index="1-1" @click="home('主页','1-1')">
             <i class="fa fa-television" aria-hidden="true"></i>
             <span slot="title" >微博主页</span>
           </el-menu-item>
           <el-menu-item index="1-2" @click="home('最新','1-2')">
             <i class="fa fa-rocket" aria-hidden="true"></i>
             <span slot="title" >最新微博</span>
           </el-menu-item>
           <el-menu-item index="1-3" @click="home('关注','1-3')">
             <i class="fa fa-user-circle" aria-hidden="true"></i>
             <span slot="title" >全部关注</span>
           </el-menu-item>

<!--实现滚动效果，省份分组-->
             <el-submenu index="1-4">
               <template slot="title">
                 <i class="el-icon-location"></i>
                 <span slot="title">省份分组</span>
               </template>
               <div style="overflow-y: scroll;max-height:650px">
               <el-menu-item-group v-for="pro in $store.state.provinces">
                 <el-menu-item @click="home(pro.province,pro.id)" :index=pro.id>{{pro.province}}</el-menu-item>
               </el-menu-item-group>
               <el-submenu index="4-24" >
                  <template slot="title">自治区</template>
                 <el-menu-item-group v-for="pro in $store.state.municipality">
                    <el-menu-item @click="home(pro.province,pro.id )" :index=pro.id>{{pro.province}}</el-menu-item>
                 </el-menu-item-group>
               </el-submenu>
               <el-submenu index="4-25">
                 <template slot="title">直辖市</template>
                 <el-menu-item-group v-for="pro in $store.state.city">
                   <el-menu-item @click="home(pro.municipality,pro.id)" :index=pro.id>{{pro.municipality}}</el-menu-item>
                 </el-menu-item-group>
               </el-submenu>
               <el-submenu index="4-26" title="特别行政区" >
                 <template slot="title">特别行政区</template>
                 <el-menu-item-group v-for="pro in $store.state.Sar">
                   <el-menu-item @click="home(pro.province,pro.id)" :index=pro.id>{{pro.province}}</el-menu-item>
                 </el-menu-item-group>
               </el-submenu>
               </div>
             </el-submenu>
         </el-menu>
       </el-col>

<!--子组件显示-->
       <el-col span="15" style="margin-left: 15.8%">
         <router-view :blogIDList = "blogIDList" :key="new Date()"/>
       </el-col>

<!--可能感兴趣的人-->
       <el-col span="5" style="position:fixed;left: 66.8%">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>你可能感兴趣的人</span>
           </div>
           <div v-for="user in userList">
             <div>
               <el-row>
                 <el-col span="5">
                   <div style="float: left">
                      <el-avatar :src=user.icon ></el-avatar>
                   </div>
                 </el-col>
                 <el-col span="13">
                   <div style="float: left">
                    <b>{{user.nickname}}</b>
                   </div>
                 </el-col>
                 <el-col span="6" >
                    <el-button style="float: right" @click="showUser(user.id)">进入主页</el-button>
                 </el-col>
               </el-row>
             </div>
           </div>
         </el-card>
       </el-col>
     </el-row>
</template>

<script>
import {setSession} from "@/utils/Token";
import {getSession} from "@/utils/Token";
import {getBlogs,interestUser} from "@/api/api";



export default {

  name: "main_home",
  components: {
  },


  data(){
    return{
      group_index:'1-1',
      value: true,
      blogIDList:[],
      /*可都感兴趣的人*/
      userList:[],
      /*用于数据刷新*/
      isViews:false,
    }
  },
  methods: {
    /*展示用户*/
    showUser(userId){
      setSession('restUser',userId);
      if(this.$route.path === '/main/user'){
        this.$router.push('/main');
      }
      this.$router.push('/main/user');
    },
/*主页--最新--关注--省份---跳转*/
    home(select,index){
      let str = select + '-全部';
      setSession('title1',select);
      setSession("group_index",index);
      setSession("title",str);
      setSession("activeIndex",'1-1-1');
      getBlogs(str).then(res=>{
        if(res.data.status === 200){
          this.blogIDList = res.data.data;
          if(this.$route.path != '/main'){
            this.$router.push('/main');
          }
        }
      })
    },
  },

/*创建时进行博客ID列表请求*/
  created() {
    let str;
    if (getSession('title') === null) {
      str = '主页-全部';
    } else {
    str = getSession('title');
  }
    getBlogs(str,1).then((res)=>{
      if(res.data.status === 200){
        this.blogIDList = res.data.data;
      }
    });
    interestUser().then((res)=>{
      if(res.data.status === 200){
        this.userList = res.data.data;
        this.isViews = true;
      }
    })
  },

  /*挂载，对于选择框位置进行校正*/
  mounted() {
    if(sessionStorage.getItem('group_index')!=null) {
      this.group_index = getSession('group_index');
    }
  }
}
</script>

<style>

</style>